<template>
  <div ref="tools" class="tools">
    <Scroll :height="height">
      <Row>
        <Col span="12">
          <Card>
            <p slot="title">
              <Icon type="ios-film-outline"></Icon>应用路径
              <a href="#" @click.prevent="changeLimit">
                <Tooltip content="新增" placement="top" transfer>
                  <Icon type="md-add-circle" />
                </Tooltip>
              </a>
            </p>
            <Page :current="2" :total="50" simple slot="extra" />
            <ul>
              <li v-for="item in randomMovieList">
                <a :href="item.url" target="_blank">{{ item.name }}</a>
                <span>
                  <Icon type="ios-star" v-for="n in 4" :key="n"></Icon>
                  <Icon type="ios-star" v-if="item.rate >= 9.5"></Icon>
                  <Icon type="ios-star-half" v-else></Icon>
                  {{ item.rate }}
                </span>
              </li>
            </ul>
          </Card>
        </Col>
        <Col span="12">
          <Card>
            <p slot="title">
              <Icon type="ios-film-outline"></Icon>python脚本
              <a href="#" @click.prevent="changeLimit">
                <Tooltip content="新增" placement="top" transfer>
                  <Icon type="md-add-circle" />
                </Tooltip>
              </a>
            </p>
            <Page :current="2" :total="50" simple slot="extra" />
            <ul>
              <li v-for="item in randomMovieList">
                <a :href="item.url" target="_blank">{{ item.name }}</a>
                <span>
                  <Icon type="ios-star" v-for="n in 4" :key="n"></Icon>
                  <Icon type="ios-star" v-if="item.rate >= 9.5"></Icon>
                  <Icon type="ios-star-half" v-else></Icon>
                  {{ item.rate }}
                </span>
              </li>
            </ul>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <Card style="width:100%">
            <p slot="title">
              <Icon type="ios-film-outline"></Icon>常用链接
              <a href="#" @click.prevent="changeLimit">
                <Tooltip content="新增" placement="top" transfer>
                  <Icon type="md-add-circle" />
                </Tooltip>
              </a>
            </p>
            <Page :current="2" :total="50" simple slot="extra" />
            <ul>
              <li v-for="item in randomMovieList">
                <a :href="item.url" target="_blank">{{ item.name }}</a>
                <span>
                  <Icon type="ios-star" v-for="n in 4" :key="n"></Icon>
                  <Icon type="ios-star" v-if="item.rate >= 9.5"></Icon>
                  <Icon type="ios-star-half" v-else></Icon>
                  {{ item.rate }}
                </span>
              </li>
            </ul>
          </Card>
        </Col>
        <Col span="12">
          <Card style="width:100%">
            <p slot="title">
              <Icon type="ios-film-outline"></Icon>新增分组
              <a href="#" @click.prevent="changeLimit">
                <Tooltip content="新增" placement="top" transfer>
                  <Icon type="md-add-circle" />
                </Tooltip>
              </a>
            </p>
            <Page :current="2" :total="50" simple slot="extra" />
            <ul>
              <li v-for="item in randomMovieList">
                <a :href="item.url" target="_blank">{{ item.name }}</a>
                <span>
                  <Icon type="ios-star" v-for="n in 4" :key="n"></Icon>
                  <Icon type="ios-star" v-if="item.rate >= 9.5"></Icon>
                  <Icon type="ios-star-half" v-else></Icon>
                  {{ item.rate }}
                </span>
              </li>
            </ul>
          </Card>
        </Col>
      </Row>
    </Scroll>
    <Drawer :closable="false" width="640" v-model="isShow">
      <ToolsModel v-if="isShow" />
    </Drawer>
  </div>
</template>
<script>
import { on, off } from "../../utils/dom";
import ToolsModel from "./toolsModel"
export default {
  data() {
    return {
      isShow:false,
      movieList: [
        {
          name: "The Shawshank Redemption",
          url: "https://movie.douban.com/subject/1292052/",
          rate: 9.6,
        },
        {
          name: "Leon:The Professional",
          url: "https://movie.douban.com/subject/1295644/",
          rate: 9.4,
        },
        {
          name: "Farewell to My Concubine",
          url: "https://movie.douban.com/subject/1291546/",
          rate: 9.5,
        },
        {
          name: "Forrest Gump",
          url: "https://movie.douban.com/subject/1292720/",
          rate: 9.4,
        },
        {
          name: "Life Is Beautiful",
          url: "https://movie.douban.com/subject/1292063/",
          rate: 9.5,
        },
        {
          name: "Spirited Away",
          url: "https://movie.douban.com/subject/1291561/",
          rate: 9.2,
        },
        {
          name: "Schindler's List",
          url: "https://movie.douban.com/subject/1295124/",
          rate: 9.4,
        },
        {
          name: "The Legend of 1900",
          url: "https://movie.douban.com/subject/1292001/",
          rate: 9.2,
        },
        {
          name: "WALL·E",
          url: "https://movie.douban.com/subject/2131459/",
          rate: 9.3,
        },
        {
          name: "Inception",
          url: "https://movie.douban.com/subject/3541415/",
          rate: 9.2,
        },
      ],
      height: 0,
      randomMovieList: [],
    };
  },
  methods: {
    changeLimit() {
      function getArrayItems(arr, num) {
        const temp_array = [];
        for (let index in arr) {
          temp_array.push(arr[index]);
        }
        const return_array = [];
        for (let i = 0; i < num; i++) {
          if (temp_array.length > 0) {
            const arrIndex = Math.floor(Math.random() * temp_array.length);
            return_array[i] = temp_array[arrIndex];
            temp_array.splice(arrIndex, 1);
          } else {
            break;
          }
        }
        return return_array;
      }
      this.randomMovieList = getArrayItems(this.movieList, 5);
      this.isShow = true
    },
    getToolsHight() {
      this.height = parseInt(window.getComputedStyle(this.$refs.tools).height);
    },
  },
  mounted() {
    this.changeLimit();
    this.getToolsHight();
    on(window, "resize", this.getToolsHight);
  },
  beforeDestroy() {
    off(window, "resize", this.getToolsHight);
  },
};
</script>
<style>
.tools {
  position: fixed;
  top: 64px;
  bottom: 20px;
  width: 100%;
  background-color: #f8f8f9;
}
</style>